import React, { useState, useEffect } from 'react';
import MainLayout from "@/component/mainLayout/mainLayout";
import { InterfaceG } from "@config/Config";
import yhTools from "@/tools/yh";
import './index.scss';

const XhbActivity = props => {
  const [tabIndex, settabIndex] = useState(0);
  const [signStatus, setsignStatus] = useState('1'); //签约状态 0:签约 1：解约 2：签约中"
  const [incomeAmt, setincomeAmt] = useState('0.00');  //收益
  const [showFNav, setshowFNav] = useState(false);
  const [bigScreen, setbigScreen] = useState(false);
  const tabs = [
    {
      type: 1,
      title: '开通并签约',
    },
    {
      type: 2,
      title: '账户存款',
    },
    {
      type: 3,
      title: '超市消费',
    },
    {
      type: 4,
      title: '活动规则',
    },
  ];

  const handleChangeTab = (index) => {
    settabIndex(index);
  }

  const init = () => {
    let objs = {
      url: InterfaceG.xhbActivityInit,
      params: {},
      _alertShow: false
    };
    yhTools.request(objs).then(res => {
      if (res.code === "0") {
        let { signStatus, incomeAmt } = res.data;
        setsignStatus(signStatus);
        setincomeAmt(incomeAmt);
      }
    })
  }

  //去签约
  const handleGotoSign = () => {
    props.history.push(`/xhbBalanceNoSign`);
  }

  //去充值
  const handleGotoRecharge = () => {
    props.history.push(`/rechargeAccount`);
  }

  //去充值明细页
  const handleGotoRecord = () => {
    props.history.push(`/xhbRechargeRecord`);
  }

  const bindHandleScroll = (e) => {
    var scrollTop = document.documentElement.scrollTop;
    let tabDom = document.getElementsByClassName('tab-header');
    console.log(scrollTop, tabDom[0].offsetTop)
    if (scrollTop >= tabDom[0].offsetTop) {
      setshowFNav(true);
    } else {
      setshowFNav(false);
    }
  }

  useEffect(() => {
    init();
    if (document.documentElement.clientHeight > 667) {
      console.log('大屏手机')
      setbigScreen(true);
    }
    window.document.addEventListener('scroll', bindHandleScroll, false);
    return () => {
      window.removeEventListener('scroll', bindHandleScroll);
    }
  }, []);

  const pageParams = {
    header: {
      title: "",
      headerBackground: "#FFF7F2",
      newBackButt: true,
    },
    cacheLifecycles: props.cacheLifecycles,
    history: props.history
  };

  return (
    <MainLayout pageParams={pageParams} useScroll={false}>
      <div className="xhb-activity-page">
        <img src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_active_top.jpg" alt="" />
        <div className="tab-header">
          {tabs.map((item, index) => {
            return (
              <div className="tab-nav" onClick={() => handleChangeTab(index)}>
                <span className={`${tabIndex == index ? 'selected' : 'default'}`}>{item.title}</span>
                <span className="nav-bar" style={{ display: tabIndex == index ? 'block' : 'none' }}></span>
              </div>
            )
          })}
        </div>
        {tabIndex == 0 && (
          <div style={{ paddingBottom: signStatus == 0 ? '1.98rem' : '1.76rem' }}>
            <img src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_active_tab1.jpg" alt="" />

          </div>
        )}
        {tabIndex == 1 && (
          <div style={{ paddingBottom: signStatus == 0 ? '1.98rem' : '1.76rem' }}>
            <img src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_active_tab2.jpg" alt="" />
          </div>
        )}
        {tabIndex == 2 && (
          <div style={{ paddingBottom: signStatus == 0 ? '1.98rem' : '1.76rem' }}>
            <img src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_active_tab3.jpg" alt="" />
          </div>
        )}
        {tabIndex == 3 && (
          <div style={{ paddingBottom: signStatus == 0 ? '7.98rem' : '6.76rem', background: '#fef8f2' }}>
            <img src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_active_tab4.jpg" alt="" />
          </div>
        )}
        {signStatus == 1 && (
          <div className="tab1-btn">
            <div className="btn" onClick={handleGotoSign}>立即尊享
              <span className="tag">限时</span>
            </div>
          </div>
        )}
        {signStatus == 0 && (
          <div className="tab2-btn">
            <p className="amt" onClick={handleGotoRecord}>已尊享超市充值卡: ¥<span>{incomeAmt} &gt;</span></p>
            <div className="btn" onClick={handleGotoRecharge}>立即存钱
              <span className="tag">限时</span>
            </div>
          </div>
        )}
        {/* 浮动导航 */}
        {showFNav && (
          <div className="tab-header" style={{ position: 'fixed', top: bigScreen ? '1.88rem' : '1.48rem', left: '0rem' }}>
            {tabs.map((item, index) => {
              return (
                <div className="tab-nav" onClick={() => handleChangeTab(index)}>
                  <span className={`${tabIndex == index ? 'selected' : 'default'}`}>{item.title}</span>
                  <span className="nav-bar" style={{ display: tabIndex == index ? 'block' : 'none' }}></span>
                </div>
              )
            })}
          </div>
        )}
      </div>
    </MainLayout>
  )
}

export default XhbActivity;